<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<%@include file="/include/head_libs.jsp" %>

<script type="text/javascript" src="<c:url value='/assets/js/admin/admin_kanban.js'/>"></script>

<body class="bg-base-100 font-sans h-screen">
<!-- 主体内容 -->
<div class="max-w-7xl mx-auto p-6 select-none">
    <!-- 卡片式布局 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 dark:text-white">
        <!-- 流量数据卡片 -->
        <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300">
            <div class="card-body">
                <h2 class="card-title text-xl font-semibold mb-4">流量数据</h2>
                <div class="relative w-full" id="main" style="height: 350px;"></div>
            </div>
        </div>

        <!-- 注册页面滚动列表卡片 -->
        <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300">
            <div class="card-body">
                <h2 class="card-title text-xl font-semibold mb-4">当前注册页面</h2>
                <div id="registeredPages" class="overflow-y-auto h-72 space-y-2 p-2 bg-base-200 rounded-lg">
                    <!-- 动态内容插入这里 -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let {totalClient} = useWebClient();
    let {getTotal, getRoutes} = totalClient();

    $(document).ready(async function () {
        // 每隔 5 秒刷新一次图表
        setInterval(() => refreshChartData(getTotal), 5000);

        // 初始加载一次图表
        refreshChartData(getTotal);

        // 获取并展示注册的页面
        document.getElementById('registeredPages').innerHTML = await getRoutes();
    })
</script>

</body>
</html>
